<template>
  <div class="order">
    <div class="title-msg">我的账单</div>

    <div class="option-site">

      <div class="option-site-head"><span>账单列表</span></div>

      <div class="option-site-neck">
        <Neck @search="mSearch"
              :code="orderListAndRecordInfo.code"
              :less-amount="orderListAndRecordInfo.lessAmount"
              :more-amount="orderListAndRecordInfo.moreAmount"
              :less-date="orderListAndRecordInfo.lessDate"
              :more-date="orderListAndRecordInfo.moreDate">
        </Neck>
      </div>

      <div class="option-site-table">
        <Table  :list="orderListAndRecordInfo.page.list"></Table>
        <Footer :count="orderListAndRecordInfo.page.count"
                :total="orderListAndRecordInfo.page.total"
                :index="orderListAndRecordInfo.page.index"
                @pre="mPre"
                @next="mNext">
        </Footer>
      </div>

    </div>

  </div>
</template>

<script>
  import Neck from "./childComps/Neck";
  import Table from "./childComps/Table";
  import Footer from "./childComps/Footer";

  import {verToken} from 'common/utils'
  import {mapGetters} from 'vuex'

  import {getOrderList} from 'network/mix';
  export default {
    name: "Order",
    components: {
      Neck,
      Table,
      Footer,
    },
    data() {
      return {
        orderListAndRecordInfo: { // 用户信息和指定的检索信息
          page: { // 当前数据的信息
            list: [], // 展示的数据集合
            count: 0, // 总记录数
            total: 0, // 总页数
            index: 1, // 当前页,默认第1页
          },
          username: '',
          code: '',
          lessAmount: 0,
          moreAmount: 0,
          lessDate: new Date('2020-11-04 18:41:42'),
          moreDate: new Date(),
        }
      }
    },
    created() {
      this.orderListAndRecordInfo.username = verToken(this.token).username
      // console.log('sdsddssdsd');
      // console.log(this.orderListAndRecordInfo.username);
    },
    mounted() {
      this.mGetOrderList()
    },
    computed: {
      ...mapGetters ({
        token: 'getToken'
      })
    },
    methods: {
      mGetOrderList() { // 首次获取订单
        getOrderList(this.orderListAndRecordInfo.username, '', 0, 0, new Date('2020-11-04 18:41:42'), new Date())
          .then(res => {
            this.orderListAndRecordInfo = res;
            // console.log(this.orderListAndRecordInfo);
          })
          .catch(error => {
            console.log('获取订单失败' + error);
          })
      },
      mSearch({co, la, ma, ld, md}) {
        getOrderList(this.orderListAndRecordInfo.username, co, la, ma, ld, md, 1)
          .then(result => {
            // console.log(result);
            this.orderListAndRecordInfo = result;
            // console.log(this.goodsListAndRecordInfo);

            this.$bus.$emit('orderBus',{ // 通过事件总线发送事件,以使footer组件接收,实现搜索后还能使用footer进行上一页和下一页
              co: co,
              la: la,
              ma: ma,
              ld: ld,
              md: md,
            })
          })
          .catch(error => {
            console.log('查询订单失败' + error);
          })
      },

      mPre({co, la, ma, ld, md, i}) { // 上一页
        getOrderList(this.orderListAndRecordInfo.username, co, la, ma, ld, md, i - 1)
          .then(result => {
            // console.log(result);
            this.orderListAndRecordInfo = result;
            // console.log(this.goodsListAndRecordInfo);

            this.$bus.$emit('orderBus',{ // 通过事件总线发送事件,以使footer组件接收,实现搜索后还能使用footer进行上一页和下一页
              co: co,
              la: la,
              ma: ma,
              ld: ld,
              md: md,
            })
          })
          .catch(error => {
            console.log('获取上一页订单失败' + error);
          })

      },
      mNext({co, la, ma, ld, md, i}) { // 下一页
        getOrderList(this.orderListAndRecordInfo.username, co, la, ma, ld, md, i + 1)
          .then(result => {
            // console.log(result);
            this.orderListAndRecordInfo = result;
            // console.log(this.userListAndRecordInfo);

            this.$bus.$emit('orderBus',{ // 通过事件总线发送事件,以使footer组件接收,实现搜索后还能使用footer进行上一页和下一页
              co: co,
              la: la,
              ma: ma,
              ld: ld,
              md: md,
            })
          })
          .catch(error => {
            console.log('获取下一页订单失败' + error);
          })
      },
    }
  }
</script>

<style scoped>
  .order {
    height: 100%;
    /*background-color: green;*/
  }
  .title-msg {
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
    font-size: 30px;

    background-color: white;
  }
  .option-site {
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    height: 530px;

    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background-color: #fff;
  }
  .option-site-head {
    padding-left: 20px;
    height: 45px;
    line-height: 45px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;

    border-bottom: 1px solid #cdcdcd;
    background-color: green;

    color: white;
  }
  .option-site-neck {
    margin-left: 20px;
    margin-right: 20px;
    height: 60px;
    line-height: 60px;

    border-bottom: 1px solid #cdcdcd;

    /*background-color: green;*/
  }
  /*.option-site-neck select {*/
  /*  width: 100px;*/
  /*  height: 30px;*/
  /*  margin-right: 20px;*/

  /*  border-radius: 4px;*/
  /*  border: 1px solid #cdcdcd;*/
  /*  background-color: #fff;*/
  /*}*/
  /*.option-site-neck .screen-btn {*/
  /*  height: 30px;*/
  /*  width: 60px;*/
  /*  color: white;*/
  /*  border-radius: 4px;*/

  /*  outline: none;*/
  /*  border: none;*/
  /*  background-color: #007bff;*/
  /*}*/
  /*.option-site-neck .screen-btn:hover {*/
  /*  cursor: pointer;*/
  /*  opacity: 0.75;*/
  /*}*/
  /*.option-site-neck .search-text {*/
  /*  width: 200px;*/
  /*  height: 28px;*/
  /*  transform: translateX(120px);*/
  /*}*/
  /*.option-site-neck .search-btn {*/
  /*  height: 32px;*/
  /*  width: 60px;*/
  /*  color: white;*/
  /*  border-radius: 4px;*/
  /*  background-color: #007bff;*/
  /*  transform: translateX(130px);*/

  /*  outline: none;*/
  /*  border: none;*/
  /*}*/
  /*.option-site-neck .search-btn:hover {*/
  /*  cursor: pointer;*/
  /*  opacity: 0.75;*/
  /*}*/
  /*.option-site-neck .add-btn {*/
  /*  transform: translateX(435px);*/

  /*  height: 30px;*/
  /*  width: 80px;*/
  /*  color: white;*/
  /*  border-radius: 4px;*/
  /*  background-color: #28a745;*/

  /*  outline: none;*/
  /*  border: none;*/
  /*}*/
  /*.option-site-neck .add-btn:hover {*/
  /*  cursor: pointer;*/
  /*  opacity: 0.75;*/
  /*}*/

  .option-site-table {
    margin-left: 20px;
    margin-right: 20px;

    height: 70%;

    /*background-color: green;*/
  }
</style>